<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../wh2114/vuedemo/lib/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <h2>{{title}}</h2>
      <h3 v-for="(l,i) in list" :key="i">{{l}}</h3>
      <h3 v-for="(item,index) in arr" :key="index">{{item}} - {{index}}</h3>
      <h3 v-for="(l,i) in items" :key="i">{{l.message}}-{{l}}</h3>
      <ul>
        <li v-for="(l,i) in provinces" :key="i">
          <h5>{{l.name}} -- {{i}}</h5>
          <ol>
            <li v-for="(city,index) in l.cities" :key="index">
              {{city.name}} -- {{index}}
            </li>
          </ol>
        </li>
      </ul>
      <div>
        <h4 v-for="(value,key,index) in object">
          {{key}}:{{value}} -- {{index}}
        </h4>
      </div>
      <div v-for="(car,key,index) in cars" :key="index">
        <p>序号:{{index+1}}</p>
        <p>品牌: {{car.brand}}</p>
        <p>颜色: {{car.color}}</p>
        <p>型号: {{car.model}}</p>
      </div>
    </div>

    <script>
      var provinces = [
        {
          name: "浙江",
          cities: [
            {
              name: "金华",
            },
            {
              name: "杭州",
            },
            {
              name: "温州",
            },
          ],
        },
        {
          name: "湖北",
          cities: [
            {
              name: "武汉",
            },
            {
              name: "襄樊",
            },
            {
              name: "黄冈",
            },
          ],
        },
        {
          name: "江苏",
          cities: [
            {
              name: "南京",
            },
            {
              name: "徐州",
            },
            {
              name: "连云港",
            },
          ],
        },
      ];
      var cars = {
        car01: { brand: "Ford", model: "Mustang", color: "red" },
        car02: { brand: "Fiat", model: "500", color: "white" },
        car03: { brand: "Volvo", model: "XC90", color: "black" },
      };
      const vm = new Vue({
        data: {
          title: "v-for 列表渲染",
          arr: ["Vue", "React", "Node", "小程序"],
          items: [{ message: "Foo" }, { message: "Bar" }],
          provinces,
          cars,
          object: {
            title: "How to do lists in Vue",
            author: "Jane Doe",
            publishedAt: "2016-04-10",
          },
          list: ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J"],
        },
        methods: {},
        mounted() {
          document.getElementsByTagName("title")[0].innerHTML = this.title;
        },
      }).$mount("#app");

      var a = [1, 2, 3];
      var b = a; // 浅拷贝
      b.push(4);
      console.log(a);
      var c = [...a]; // 深拷贝
      c.push(6, 7);
      console.log(a);

      vm.list.push("P");
      vm.list.unshift("Y");
      vm.list.reverse();
      vm.list.sort();

      vm.list = vm.list.concat(["U", "M"]);
      vm.list = vm.list.slice(5, 9);
      vm.list = vm.list.filter((item, index) => index % 2 == 0);

      vm.$set(vm.list, 0, "AAAAA");
      Vue.set(vm.list, 3, "CCC");
      vm.$set(vm.list, 5, "LLLLL");
      vm.list.splice(6, 1, "SSSSSS");

      vm.$delete(vm.list, 0);
      Vue.delete(vm.list, 3);
      vue.delete(vm.list, 5);
      vm.list.splice(6, 1);
      console.log(vm.list);
    </script>

    <!-- 
        
        v-for
        v-for    列表渲染   指令可以渲染数组和对象   
        v-for="(item,index) in items" v-bind:key="index"
        v-for="(value,key,index) in object" 遍历对象 

        虚拟DOM   性能优化
        key  为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素
        你需要为每项提供一个唯一 key 属性


        Vue 识别节点的一个通用机制   一个组件添加 key key值更改 组件强制刷新 

        深浅拷贝    ...   展开运算   JOSN.parse  递归 
        深浅复制    object.assign 
        深浅监听    

        数据类型 
        基本数据类型  String Number Boolean null undefined  (不可变对象 深拷贝 )
        引用数据类型  对象 数组     (可变对象 浅拷贝)  

        不可变对象   基本数据类型      immutable 修改不可变对象 响应式系统一定检测到数据更新
        可变对象     引用数据类型      mutable   修改可变对象 可能 响应式系统无法检测到数据更新

        Vue 响应式视图 可以检测 不可变对象的数据修改   可变对象  有的时候监测不到   (响应式视图系统会监测可变对象第一层的数据改变)
        修改 基本数据类型  会触发视图更新 
        修改 引用数据类型  可能触发视图更新 

        数组方法 
        push
        pop
        shift
        unshift
        splice  增删改 
        sort
        reverse
        map   映射 return 
        reduce 
        forEach
        filter 
        find   查找某一个 
        some   有一个满足就行
        every  所有的都必须满足 
        concat  拼接
        slice   截取 

        Vue 将被侦听的数组的变异方法进行了包裹，所以它们也将会触发视图更新
        变异数组方法    这些方法直接修改原来的数组
        push
        pop
        shift
        unshift
        splice
        sort
        reverse

        非变异数组方法   这些方法不能改变原始数组 但可以返回一个新的数组   = 
        map
        reduce 
        forEach
        filter 
        find
        some 
        every
        concat 
        slice

        实例方法                              全局方法   
        vm.$set(array,index,newItem)         Vue.set         设置
        vm.$delete(arr, index)               Vue.delete      删除 

     -->
  </body>
</html>
